<template>
  <div class="ed-md" >

<!--    <MdEditor style="min-height: 89vh" v-model="form.content" />-->
    <el-affix class="ed-but" :offset="120">
      <el-button @click="edBut" class="right-container" type="primary">目录</el-button>
    </el-affix>

    <MdPreview :id="id" :modelValue="form.content" />

    <el-drawer
        v-model="isShow"
        :with-header="false"
    >
      <MdCatalog :editorId="id" :scrollElement="scrollElement" />
    </el-drawer>
  </div>
</template>

<script setup name="articleDetil">
import { MdEditor,MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import 'md-editor-v3/lib/preview.css';
const id = 'preview-only';
const scrollElement = document.documentElement;
const isShow = ref(false)
function edBut(){
  isShow.value = true
}




import {getArticle} from "@/api/article/article";
import {useRoute} from "vue-router";
let router = useRoute()
const data = reactive({
  form: {},
});
const {form} = toRefs(data);
onActivated(()=>{
  form.value ={}
  getArticle(router.query.articleId).then(response => {
    form.value = response.data
  });
})
</script>

<style scoped lang="scss">
.ed-md{
  margin: 20px;
}

.right-container {
  position: fixed;
  right: 20px; /* 控制右侧距离 */
  top: 120px; /* 与 affix 的 offset 保持一致 */
  opacity: 0.5;
}
</style>